<template>
  <div class="page">
    <div class="createForm p20">
      <el-form ref="form" :model="pageAjax.data" :inline="true">
        <div class="c-floor">
          <div class="c-head"></div>
          <div class="c-body">
            <div class="c-chunk">
              <div class="c-subheading">
                主播信息
              </div>
              <div class="c-section">
                <el-form-item label="主播姓名：">
                  <el-input
                    placeholder="主播姓名"
                    v-model="pageAjax.data.anchor.realName"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="主播昵称：">
                  <el-input
                    placeholder="主播昵称"
                    v-model="pageAjax.data.anchor.nickName"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="证件类型：">
                  <el-select
                    placeholder="请选择证件类型"
                    v-model="pageAjax.data.anchor.certType"
                  >
                    <el-option label="身份证" value="00"></el-option>
                    <el-option label="护照" value="01"></el-option>
                    <el-option label="港澳通行证" value="02"></el-option>
                    <el-option label="港澳同胞回乡证" value="05"></el-option>
                    <el-option label="其他" value="99"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="证件号码：">
                  <el-input
                    placeholder="证件号码"
                    v-model="pageAjax.data.anchor.idCard"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="联系电话：">
                  <el-input
                    placeholder="联系电话"
                    v-model="pageAjax.data.anchor.contractPhone"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="邮箱：">
                  <el-input
                    placeholder="邮箱"
                    v-model="pageAjax.data.anchor.email"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="微信号：">
                  <el-input
                    placeholder="微信号"
                    v-model="pageAjax.data.anchor.wxNo"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="地址：">
                  <el-input
                    placeholder="地址"
                    v-model="pageAjax.data.anchor.address"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="主播状态：">
                  <el-select
                    placeholder="请选择"
                    v-model="pageAjax.data.anchor.contractStatus"
                  >
                    <el-option
                      :label="item.name"
                      :key="item.value"
                      :value="item.value"
                      v-for="item in alone.realSignStatus"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="c-chunk">
              <div class="c-subheading">
                现直播平台
              </div>
              <div class="c-section">
                <el-form-item label="直播平台：">
                  <el-select
                    placeholder="请选择直播平台"
                    v-model="pageAjax.data.liveExperience.platformId"
                  >
                    <el-option
                      v-for="item in $store.state.wantPlatformList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="直播id：">
                  <el-input
                    placeholder="直播id"
                    v-model="pageAjax.data.liveExperience.liveId"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="YY号(YY平台专属)：">
                  <el-input
                    placeholder="YY号"
                    v-model="pageAjax.data.liveExperience.yyAccount"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="所属运营：">
                  <!-- <el-input
                    placeholder="所属运营"
                    v-model="pageAjax.data.liveExperience.operatorId"
                  >
                  </el-input> -->
                  <el-select
                    v-model="pageAjax.data.liveExperience.operatorId"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请搜索选择所属运营"
                    :remote-method="rAgentSearch"
                    :loading="agentSearchCp.config.loading"
                  >
                    <el-option
                      v-for="item in agentSearchCp.data"
                      :key="item.userId"
                      :label="item.realName"
                      :value="item.userId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="所属招募：">
                  <el-select
                    v-model="pageAjax.data.liveExperience.recruitId"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请搜索选择所属招募"
                    :remote-method="rSeestarSearch"
                    :loading="seestarSearchCp.config.loading"
                  >
                    <el-option
                      v-for="item in seestarSearchCp.data"
                      :key="item.userId"
                      :label="item.realName"
                      :value="item.userId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </div>
        </div>
        <div class="c-floor">
          <div class="c-head">
            <div class="c-headingExtra clearfix">
              <div class="c-heading fl">
                合同信息
              </div>
              <el-button
                type="primary"
                plain
                class="btn fl"
                size="mini"
                @click="rAddAgreement"
                >新增合同</el-button
              >
            </div>
          </div>
          <div class="c-body">
            <div
              class="c-chunk"
              v-for="(item, index) in pageAjax.data.contractList"
              :key="index"
            >
              <div class="c-subheadingExtra clearfix">
                <div class="c-subheading fl">合同{{ index + 1 }}</div>
                <div class="fl">
                  <i
                    class="el-icon-delete"
                    @click="rDeleteAgreement(index)"
                  ></i>
                </div>
                <div class="fl">
                  <!-- <el-button type="primary" plain class="btn" size="mini"
                    >上传pdf合同</el-button -->
                  <el-upload
                    class="diy-uploadBtn fl"
                    :action="uploadPdfAjax.config.url"
                    :headers="uploadPdfAjax.config.headers"
                    :multiple="false"
                    :data="{ index: 1 }"
                    name="file"
                    ref="uploadPdf"
                    accept=".pdf"
                    :show-file-list="false"
                    :disabled="uploadPdfAjax.config.disabled"
                    :on-success="rUploadPdfSuc"
                    :on-error="rUploadPdfFail"
                    :before-upload="rUploadPdfBefore"
                    :on-progress="rUploadPdfProgress"
                    data-index="1111"
                    :limit="1"
                  >
                    <el-button
                      type="primary"
                      @click="rUploadClick(index)"
                      plain
                      class="btn"
                      size="mini"
                      >上传pdf合同</el-button
                    >
                  </el-upload>
                </div>
                <span>(识别合同信息)</span>
              </div>

              <div class="c-section">
                <div class="c-piece">
                  <el-form-item label="合同名称：">
                    <el-input
                      placeholder="合同名称"
                      v-model="pageAjax.data.contractList[index].contractName"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="合同类别：">
                    <el-select
                      placeholder="请选择"
                      v-model="pageAjax.data.contractList[index].contractClass"
                    >
                      <el-option
                        :label="item.name"
                        :value="item.value"
                        v-for="item in alone.agreementCate"
                        :key="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="合同编号：">
                    <el-input
                      placeholder="合同编号"
                      v-model="pageAjax.data.contractList[index].contractNo"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="签约公司(甲方)：">
                    <el-input
                      placeholder="签约公司"
                      v-model="pageAjax.data.contractList[index].firstParty"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="签约日期：">
                    <el-date-picker
                      v-model="pageAjax.data.contractList[index].signDate"
                      align="right"
                      type="date"
                      placeholder="选择签约日期"
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="合作期限：">
                    <el-input
                      placeholder="合作期限"
                      v-model="pageAjax.data.contractList[index].signPeriod"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="开始时间：">
                    <el-date-picker
                      v-model="
                        pageAjax.data.contractList[index].contractStartDate
                      "
                      align="right"
                      type="date"
                      placeholder="选择开始时间"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="终止时间：">
                    <el-date-picker
                      v-model="
                        pageAjax.data.contractList[index].contractEndDate
                      "
                      align="right"
                      type="date"
                      placeholder="选择终止时间"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="保底金额(保底合同)：">
                    <el-input
                      placeholder="保底金额"
                      v-model="
                        pageAjax.data.contractList[index].guaranteeAmount
                      "
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="底薪金额(底薪合同)：">
                    <el-input
                      placeholder="底薪金额"
                      v-model="pageAjax.data.contractList[index].baseSalary"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="签约金额：">
                    <el-input
                      placeholder="签约金额"
                      v-model="pageAjax.data.contractList[index].signAmount"
                    >
                    </el-input>
                  </el-form-item>
                  <div
                    style="line-height: 40px;display:inline-block;margin-right: 10px;"
                  >
                    <el-form-item label="每月直播有效时长：不低于">
                      <el-input
                        placeholder="输入小时数"
                        v-model="
                          pageAjax.data.contractList[index]
                            .monthValidBroadcastTime
                        "
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item label="小时 且 不低于">
                      <el-input
                        placeholder="输入天数"
                        v-model="
                          pageAjax.data.contractList[index]
                            .monthValidBroadcastDay
                        "
                      >
                      </el-input>
                    </el-form-item>
                    <span style="margin-left: -5px;">天</span>
                  </div>
                  <el-form-item label="流程号：">
                    <el-input
                      placeholder="流程号"
                      v-model="pageAjax.data.contractList[index].processId"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="合同位置：">
                    <el-input
                      placeholder="合同位置"
                      v-model="pageAjax.data.contractList[index].contractPos"
                    >
                    </el-input>
                  </el-form-item>
                </div>
                <div class="c-piece">
                  <div class="c-title">
                    收款账户信息
                  </div>
                  <el-form-item label="开户名：">
                    <el-input
                      placeholder="开户名"
                      v-model="
                        pageAjax.data.contractList[index].receiveAccount
                          .accountName
                      "
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="开户银行：">
                    <el-input
                      placeholder="开户银行"
                      v-model="
                        pageAjax.data.contractList[index].receiveAccount
                          .accountBank
                      "
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="开户账号：">
                    <el-input
                      placeholder="开户账号"
                      v-model="
                        pageAjax.data.contractList[index].receiveAccount.account
                      "
                    >
                    </el-input>
                  </el-form-item>
                </div>
                <div class="c-piece">
                  <div class="c-title">
                    经纪转让权信息
                  </div>
                  <el-form-item label="转让公司：">
                    <el-input
                      placeholder="转让公司"
                      v-model="
                        pageAjax.data.contractList[index].brokerTransfer
                          .transferCorp
                      "
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="法定代表人：">
                    <el-input
                      placeholder="法定代表人"
                      v-model="
                        pageAjax.data.contractList[index].brokerTransfer
                          .legalName
                      "
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="联系电话：">
                    <el-input
                      placeholder="联系电话"
                      v-model="
                        pageAjax.data.contractList[index].brokerTransfer
                          .contractPhone
                      "
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="地址：">
                    <el-input
                      placeholder="地址"
                      v-model="
                        pageAjax.data.contractList[index].brokerTransfer.address
                      "
                    >
                    </el-input>
                  </el-form-item>
                  <div class="c-subtitle">
                    收款账户信息(转让公司)
                  </div>
                  <el-form-item label="开户名：">
                    <el-input
                      placeholder="开户名"
                      v-model="
                        pageAjax.data.contractList[index].brokerTransfer
                          .receiveAccount.accountName
                      "
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="开户银行：">
                    <el-input
                      placeholder="开户银行"
                      v-model="
                        pageAjax.data.contractList[index].brokerTransfer
                          .receiveAccount.accountBank
                      "
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="开户账号：">
                    <el-input
                      placeholder="开户账号"
                      v-model="
                        pageAjax.data.contractList[index].brokerTransfer
                          .receiveAccount.account
                      "
                    >
                    </el-input>
                  </el-form-item>
                </div>
                <div class="c-piece">
                  <div class="c-title">
                    设备补充协议(设备扶持专属)
                  </div>
                  <div class="clearfix">
                    <span class="fl c-subtitle mr20">设备清单</span
                    ><el-button
                      type="primary"
                      plain
                      class="btn fl"
                      size="mini"
                      @click="rAddDeviceRecord(index)"
                      >新增设备清单</el-button
                    >
                  </div>
                  <el-table
                    :data="
                      pageAjax.data.contractList[index].equipmentAgreement
                        .equipments
                    "
                    style="width: 100%"
                  >
                    <el-table-column label="序号">
                      <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                        <!-- <el-input placeholder="序号" v-model="pageAjax.data.contractList[index].equipmentAgreement.equipments[scope.$index].no">
                        </el-input> -->
                      </template>
                    </el-table-column>
                    <el-table-column label="设备名称">
                      <template slot-scope="scope">
                        <el-input
                          placeholder="设备名称"
                          v-model="
                            pageAjax.data.contractList[index].equipmentAgreement
                              .equipments[scope.$index].name
                          "
                        >
                        </el-input>
                      </template>
                    </el-table-column>
                    <el-table-column label="数量">
                      <template slot-scope="scope">
                        <el-input
                          placeholder="数量"
                          @change="rChangeEquipments(index)"
                          v-model="
                            pageAjax.data.contractList[index].equipmentAgreement
                              .equipments[scope.$index].num
                          "
                        >
                        </el-input>
                      </template>
                    </el-table-column>
                    <el-table-column label="价格">
                      <template slot-scope="scope">
                        <el-input
                          placeholder="价格"
                          @change="rChangeEquipments(index)"
                          v-model="
                            pageAjax.data.contractList[index].equipmentAgreement
                              .equipments[scope.$index].price
                          "
                        >
                        </el-input>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button
                          type="primary"
                          plain
                          class="btn"
                          size="mini"
                          @click="rDeleteDeviceRecord(index, scope.$index)"
                          >删除</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="mt20">
                    <el-form-item label="税后总价：">
                      <el-input
                        placeholder="税后总价"
                        v-model="
                          pageAjax.data.contractList[index].equipmentAgreement
                            .totalAfterTax
                        "
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item label="交付地点：">
                      <el-input
                        placeholder="交付地点"
                        v-model="
                          pageAjax.data.contractList[index].equipmentAgreement
                            .placeOfDelivery
                        "
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item label="交付方式：">
                      <el-input
                        placeholder="交付方式"
                        v-model="
                          pageAjax.data.contractList[index].equipmentAgreement
                            .deliveryMode
                        "
                      >
                      </el-input>
                    </el-form-item>
                  </div>
                  <div class="mt20" style="line-height: 40px;">
                    <el-form-item label="设备扶持方式：">
                      <el-select
                        v-model="
                          pageAjax.data.contractList[index].equipmentAgreement
                            .equipmentWay
                        "
                        placeholder="请选择设备扶持方式"
                      >
                        <el-option key="直供" label="直供" value="直供">
                        </el-option>
                        <el-option key="租赁" label="租赁" value="租赁">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <template
                      v-if="
                        pageAjax.data.contractList[index].equipmentAgreement
                          .equipmentWay == '租赁'
                      "
                    >
                      <el-form-item label="租赁期限：">
                        <el-input
                          placeholder="租赁期限"
                          v-model="
                            pageAjax.data.contractList[index].equipmentAgreement
                              .rentLimit
                          "
                        >
                        </el-input>
                      </el-form-item>
                      <span style="margin-left: -5px;">月</span>
                      <el-form-item label="租赁开始时间：">
                        <el-date-picker
                          v-model="
                            pageAjax.data.contractList[index].equipmentAgreement
                              .rentBeginTime
                          "
                          type="date"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          placeholder="租赁开始时间"
                        >
                        </el-date-picker>
                      </el-form-item>
                      <el-form-item label="租赁终止时间：">
                        <el-date-picker
                          v-model="
                            pageAjax.data.contractList[index].equipmentAgreement
                              .rentEndTime
                          "
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          type="date"
                          placeholder="租赁终止时间"
                        >
                        </el-date-picker>
                      </el-form-item>
                      <el-form-item label="月租费用：">
                        <el-input
                          placeholder="月租费用"
                          v-model="
                            pageAjax.data.contractList[index].equipmentAgreement
                              .rentMoney
                          "
                        >
                        </el-input>
                      </el-form-item>
                      <span style="margin-left: -5px;">元</span>
                    </template>
                  </div>
                </div>
                <div class="c-piece">
                  <div class="c-title">
                    推广费用刷币(推广扶持专属)
                  </div>
                  <div class="">
                    <el-form-item label="投入金额：">
                      <el-input
                        placeholder="投入金额"
                        v-model="
                          pageAjax.data.contractList[index].promotionCost
                            .investAmount
                        "
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item label="返还金额：">
                      <el-input
                        placeholder="返还金额"
                        v-model="
                          pageAjax.data.contractList[index].promotionCost
                            .refundAmount
                        "
                      >
                      </el-input>
                    </el-form-item>
                  </div>
                </div>
                <div class="c-piece">
                  <div class="c-title">
                    星探合作协议(星探合作专属)
                  </div>
                  <div class="clearfix">
                    <span class="fl c-subtitle">星探收款账户信息</span>
                  </div>
                  <div class="">
                    <el-form-item label="开户名：">
                      <el-input
                        placeholder="开户名"
                        v-model="
                          pageAjax.data.contractList[index].scoutAgreement
                            .accountName
                        "
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item label="开户银行：">
                      <el-input
                        placeholder="开户银行"
                        v-model="
                          pageAjax.data.contractList[index].scoutAgreement
                            .accountBank
                        "
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item label="银行账号：">
                      <el-input
                        placeholder="银行账号"
                        v-model="
                          pageAjax.data.contractList[index].scoutAgreement
                            .account
                        "
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item label="合作费用总额：">
                      <el-input
                        placeholder="合作费用总额"
                        v-model="
                          pageAjax.data.contractList[index].scoutAgreement
                            .totalAmount
                        "
                      >
                      </el-input>
                    </el-form-item>
                  </div>
                </div>
                <div class="c-piece c-piece-iNote">
                  <div class="c-title clearfix">
                    备注：
                  </div>
                  <div class="c-section">
                    <el-form-item class="block">
                      <el-input
                        type="textarea"
                        class="block"
                        placeholder="备注"
                        v-model="pageAjax.data.contractList[index].remark"
                      >
                      </el-input>
                    </el-form-item>
                  </div>
                </div>
                <div class="c-piece">
                  <div class="c-title clearfix">
                    <span class="fl">合同照片</span>
                    <!-- <el-button type="primary" plain class="btn fl c-btnCreate" size="mini"
                      >上传pdf合同</el-button> -->
                    <!-- <el-upload
                        class="diy-uploadBtn fl"
                        :action="uploadPdfAjax.config.url"
                        :headers="uploadPdfAjax.config.headers"
                        :multiple="false"
                        ref="uploadPdf"
                        accept=".pdf"
                        :show-file-list="false"
                        :disabled="uploadPdfAjax.config.disabled"
                        :on-success="rUploadPdfSuc(index)"
                        :on-error="rUploadPdfFail(index)"
                        :before-upload="rUploadPdfBefore(index)"
                        :limit="1">
                        <el-button type="primary" plain class="btn" size="mini">上传pdf合同</el-button>
                      </el-upload> -->
                  </div>
                  <div class="mi-upload">
                    <div class="m-files">
                      <div class="m-preview clearfix">
                        <div
                          class="m-file"
                          v-for="(picsItem, picsIndex) in pageAjax.data
                            .contractList[index].contractPics"
                          :key="picsIndex"
                        >
                          <img :src="picsItem" alt="" />
                          <!-- <i class="el-icon-delete" @click="rDeletePic(index, picsIndex)"></i> -->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-form-item class="tc block">
          <el-button
            type="primary"
            plain
            class="btn"
            size="middle"
            @click="rBack"
            >取消</el-button
          >
          <el-button
            type="primary"
            class="btn"
            size="middle"
            @click="rSubmitForm"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getUserData } from "@/api/user.js";
import { addAgreementActor, checkIdCard } from "@/api/actor.js";
import _ from "lodash";

export default {
  name: "lawyer_agreementCreate",
  data: () => ({
    pageAjax: {
      loading: false,
      data: {
        anchor: {
          realName: "",
          nickName: "",
          certType: "00",
          idCard: "",
          contractPhone: "",
          email: "",
          wxNo: "",
          address: "",
          contractStatus: "SIGNING"
        },
        liveExperience: {
          platformId: "",
          platform: "",
          liveId: "",
          yyAccount: "",
          operatorId: "",
          recruitId: ""
        },
        contractList: []
      },
      rules: {}
    },
    alone: {
      uploadPdfIndex: 0,
      realSignStatus: [
        {
          name: "在约",
          value: "SIGNING"
        },
        {
          name: "解约",
          value: "RESCISSION"
        }
      ],
      agreementCate: [
        {
          name: "艺人演艺经纪合同（保底）",
          value: "bottom_guard"
        },
        {
          name: "艺人演艺经纪合同（底薪费用）",
          value: "base_salary"
        },
        {
          name: "艺人演艺经纪合同（签约金）",
          value: "sign_money"
        },
        {
          name: "主播经纪权转让协议",
          value: "broker_transfer"
        },
        {
          name: "推广扶持协议",
          value: "promotion"
        },
        {
          name: "星探合作协议",
          value: "scout_agreement"
        },
        {
          name: "设备补充协议",
          value: "equipment_agreement"
        },
        {
          name: "互联网演艺经纪合同（直播约",
          value: "network_live"
        },
        {
          name: "金牌合同",
          value: "jp_contract"
        },
        {
          name: "其他",
          value: "other"
        }
      ],
      userType: "",
      searchStr: "",
      agreementFormwork: {
        contractName: "",
        contractClass: "",
        contractNo: "",
        firstParty: "",
        signDate: "",
        signPeriod: "",
        contractStartDate: "",
        contractEndDate: "",
        guaranteeAmount: "",
        baseSalary: "",
        signAmount: "",
        processId: "",
        contractPos: "",
        receiveAccount: {
          accountName: "",
          accountBank: "",
          account: ""
        },
        brokerTransfer: {
          transferCorp: "",
          legalName: "",
          contractPhone: "",
          address: "",
          receiveAccount: {
            accountName: "",
            accountBank: "",
            account: ""
          }
        },
        equipmentAgreement: {
          totalAfterTax: "",
          placeOfDelivery: "",
          deliveryMode: "",
          equipments: [],
          equipmentWay: "",
          rentLimit: "",
          rentBeginTime: "",
          rentEndTime: "",
          rentMoney: ""
        },
        promotionCost: {
          investAmount: "",
          refundAmount: ""
        },
        scoutAgreement: {
          accountName: "",
          accountBank: "",
          account: "",
          totalAmount: "",
          remark: ""
        },
        contractPics: []
      }
    },

    agentSearchCp: {
      config: {
        loading: false
      },
      data: []
    },
    seestarSearchCp: {
      config: {
        loading: false
      },
      data: []
    },
    uploadPdfAjax: {
      loading: false,
      config: {
        disabled: false,
        headers: {
          Authorization: ""
        },
        url:
          "/bs/anchor/contract/importPdf/" +
          JSON.parse(localStorage.getItem("currentCorporation")).id
      }
    }
  }),
  created() {
    let _that = this;
    _that.uploadPdfAjax.config.headers.Authorization =
      "bearer " + _that.$store.state.sid.access_token;
  },
  methods: {
    rAgentSearch(e) {
      let _that = this;

      _that.alone.searchStr = e;
      _that.alone.userType = "OPERATOR";
      _that.getUserData();
    },
    rSeestarSearch(e) {
      let _that = this;

      _that.alone.userType = "RECRUIT";
      _that.alone.searchStr = e;
      _that.getUserData();
    },
    rAddAgreement() {
      let _that = this;
      let agreementFormwork = _.cloneDeep(_that.alone.agreementFormwork);
      _that.pageAjax.data.contractList.push(agreementFormwork);
    },
    rDeleteAgreement(index) {
      this.pageAjax.data.contractList.splice(index, 1);
    },
    rAddDeviceRecord(index) {
      let _that = this;
      let formwork = {
        no: "",
        name: "",
        num: "",
        price: ""
      };
      _that.pageAjax.data.contractList[
        index
      ].equipmentAgreement.equipments.push(formwork);
    },
    rChangeEquipments(index) {
      let _that = this;
      let equipments =
        _.cloneDeep(
          _that.pageAjax.data.contractList[index].equipmentAgreement.equipments
        ) || [];
      let totalPrice = 0;
      equipments.forEach((item, i) => {
        if (isNaN(item.num) || isNaN(item.price)) {
          _that.$message.error(
            "合同" +
              (index + 1) +
              "的设备补充协议的设备清掉" +
              (i + 1) +
              "的数量和价格只能为数字"
          );
          return;
        }
        totalPrice += 1 * item.num * item.price;
      });
      _that.pageAjax.data.contractList[
        index
      ].equipmentAgreement.totalAfterTax = totalPrice;
    },
    rDeleteDeviceRecord(index, i) {
      this.pageAjax.data.contractList[
        index
      ].equipmentAgreement.equipments.splice(i, 1);

      this.rChangeEquipments(index);
    },
    rDeletePic(index, i) {
      this.pageAjax.data.contractList[index].pics.splice(i, 1);
    },
    rUploadPdfSuc(respData) {
      let _that = this;
      _that.uploadPdfAjax.config.disabled = false;
      _that.uploadPdfAjax.loading.close();
      let data = respData.data || {};
      _that.clearFiles();
      if (respData.code === _that.STATUS.success[0]) {
        _that.resetPageAjaxData(data);
        // _that.pageAjax.data.anchor =  _.merge(pageAjaxData.anchor, respData.data.anchor);
        // _that.pageAjax.data.contractList[uploadPdfIndex] = _.merge(respData.data.contractList[0], pageAjaxData.contractList[uploadPdfIndex])
        // console.log('respData', respData, _that.pageAjax)
        // _that.pageAjax.paging.current = 0;
        // _that.getPageData();
      } else {
        _that.$message.error({
          message: respData.msg || "上传失败"
        });
      }
    },
    rUploadPdfFail() {
      let _that = this;
      _that.uploadPdfAjax.loading.close();
      _that.uploadPdfAjax.config.disabled = false;
      _that.clearFiles();
      _that.$message.error({
        message: "上传错误，请查看网络或联系管理员"
      });
    },
    rUploadPdfBefore() {
      this.uploadPdfAjax.loading = this.$loading({
        text: "上传中。。。",
        lock: true
      });
    },
    rUploadPdfProgress() {},
    resetPageAjaxData(data) {
      let _that = this;
      let pageAjaxData = _.cloneDeep(_that.pageAjax.data);
      let uploadPdfIndex = _that.alone.uploadPdfIndex;
      let anchor = data.anchor || {};
      let liveExperience = data.liveExperience || {};
      let contract = data.contractList[0] || {};
      // _that.pageAjax.data.anchor =  _.merge(pageAjaxData.anchor, data.anchor);
      //_that.pageAjax.data.contractList[uploadPdfIndex] = _.merge(data.contractList[0], pageAjaxData.contractList[uploadPdfIndex]);

      // 更新主播信息
      for (let attr in anchor) {
        if (anchor[attr]) {
          pageAjaxData.anchor[attr] = anchor[attr];
        }
      }
      // 更新现直播平台
      for (let attr in liveExperience) {
        if (liveExperience[attr]) {
          pageAjaxData.liveExperience[attr] = liveExperience[attr];
        }
      }
      // 更新合同
      for (let attr in contract) {
        // 收款账户信息
        if (attr === "receiveAccount" && contract[attr]) {
          for (let attrOne in contract[attr]) {
            if (contract[attr][attrOne]) {
              pageAjaxData.contractList[uploadPdfIndex][attr][attrOne] =
                contract[attr][attrOne];
            }
          }
        } else if (attr === "brokerTransfer" && contract[attr]) {
          for (let attrOne in contract[attr]) {
            if (attrOne === "receiveAccount" && contract[attr][attrOne]) {
              for (let attrTwo in contract[attr][attrOne]) {
                if (contract[attr][attrOne][attrTwo]) {
                  pageAjaxData.contractList[uploadPdfIndex][attr][attrOne][
                    attrTwo
                  ] = contract[attr][attrOne][attrTwo];
                }
              }
            } else {
              if (contract[attr][attrOne]) {
                pageAjaxData.contractList[uploadPdfIndex][attr][attrOne] =
                  contract[attr][attrOne];
              }
            }
          }
        } else if (attr === "equipmentAgreement" && contract[attr]) {
          for (let attrOne in contract[attr]) {
            if (attrOne === "equipments" && contract[attr][attrOne]) {
              for (let attrTwo in contract[attr][attrOne]) {
                if (contract[attr][attrOne][attrTwo]) {
                  pageAjaxData.contractList[uploadPdfIndex][attr][attrOne][
                    attrTwo
                  ] = contract[attr][attrOne][attrTwo];
                }
              }
            } else {
              if (contract[attr][attrOne]) {
                pageAjaxData.contractList[uploadPdfIndex][attr][attrOne] =
                  contract[attr][attrOne];
              }
            }
          }
        } else if (attr === "promotionCost" && contract[attr]) {
          for (let attrOne in contract[attr]) {
            if (contract[attr][attrOne]) {
              pageAjaxData.contractList[uploadPdfIndex][attr][attrOne] =
                contract[attr][attrOne];
            }
          }
        } else if (attr === "scoutAgreement" && contract[attr]) {
          for (let attrOne in contract[attr]) {
            if (contract[attr][attrOne]) {
              pageAjaxData.contractList[uploadPdfIndex][attr][attrOne] =
                contract[attr][attrOne];
            }
          }
        } else if (attr === "contractPics" && contract[attr]) {
          for (let attrOne in contract[attr]) {
            if (contract[attr][attrOne]) {
              pageAjaxData.contractList[uploadPdfIndex][attr][attrOne] =
                contract[attr][attrOne];
            }
          }
        } else {
          if (contract[attr]) {
            pageAjaxData.contractList[uploadPdfIndex][attr] = contract[attr];
          }
        }
      }

      _that.pageAjax.data = pageAjaxData;
    },
    clearFiles() {
      let _that = this;
      for (var i = _that.$refs.uploadPdf.length; i--; ) {
        _that.$refs.uploadPdf[i].clearFiles();
      }
    },
    rUploadClick(index) {
      this.alone.uploadPdfIndex = index;
    },
    rBack() {
      this.goRefresh(-1);
    },
    rSubmitForm() {
      let _that = this;
      let pageAjaxData = _that.pageAjax.data;
      let wantPlatformList = _that.$store.state.wantPlatformList;
      if (!pageAjaxData.anchor.realName) {
        _that.$message.error("主播姓名不能为空");
        return;
      }
      if (pageAjaxData.liveExperience.platformId) {
        let platform = "";
        wantPlatformList.forEach(item => {
          if (item.id == pageAjaxData.liveExperience.platformId) {
            platform = item.name;
            return;
          }
        });
        _that.pageAjax.data.liveExperience.platform = platform;
      }
      if (!pageAjaxData.anchor.idCard) {
        _that.$message.error("主播身份证不能为空");
        return;
      }
      for (var i = 0, lenI = pageAjaxData.contractList.length; i < lenI; i++) {
        if (!pageAjaxData.contractList[i].contractName) {
          _that.$message.error("合同" + (i + 1) + "的名称不能为空");
          return;
        }
        if (!pageAjaxData.contractList[i].contractClass) {
          _that.$message.error("合同" + (i + 1) + "的类型不能为空");
          return;
        }

        if (
          pageAjaxData.contractList[i].equipmentAgreement &&
          pageAjaxData.contractList[i].equipmentAgreement.equipments.length
        ) {
          for (
            var k = 0,
              lenK =
                pageAjaxData.contractList[i].equipmentAgreement.equipments
                  .length;
            k < lenK;
            k++
          ) {
            if (
              !pageAjaxData.contractList[i].equipmentAgreement.equipments[k]
                .name ||
              !pageAjaxData.contractList[i].equipmentAgreement.equipments[k]
                .num ||
              !pageAjaxData.contractList[i].equipmentAgreement.equipments[k]
                .price
            ) {
              _that.$message.error(
                "合同" +
                  (i + 1) +
                  "的设备清掉" +
                  (k + 1) +
                  "的名称、数量、价格都不能为空"
              );
              return;
            }
            pageAjaxData.contractList[i].equipmentAgreement.equipments[k].no =
              k + 1;
          }
        }
      }

      for (let i = 0, lenI = pageAjaxData.contractList.length; i < lenI; i++) {
        if (!pageAjaxData.contractList[i].contractName) {
          _that.$message.error("合同" + (i + 1) + "的名称不能为空");
          return;
        }
        if (!pageAjaxData.contractList[i].contractClass) {
          _that.$message.error("合同" + (i + 1) + "的类型不能为空");
          return;
        }
        if (!pageAjaxData.contractList[i].contractNo) {
          _that.$message.error("合同" + (i + 1) + "的合同编号不能为空");
          return;
        }
      }

      if (_that.pageAjax.loading || _that.pageAjax.btnDisabled) {
        return;
      }
      _that.pageAjax.loading = true;
      _that.pageAjax.btnDisabled = true;

      checkIdCard({ idCard: pageAjaxData.anchor.idCard }).then(idCardResp => {
        let idCardRespData = idCardResp.data;
        if (idCardRespData.code === _that.STATUS.success[0]) {
          if (idCardRespData.data.exists) {
            this.$confirm("身份证已存在，是否继续提交?", "提交提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                _that.addAgreementActor();
              })
              .catch(() => {
                _that.pageAjax.loading = false;
                _that.pageAjax.btnDisabled = false;
              });
            return;
          } else {
            _that.addAgreementActor();
          }
        } else {
          _that.pageAjax.loading = false;
          _that.pageAjax.btnDisabled = false;
          _that.$message.error(idCardRespData.msg || "添加失败");
        }
      });
    },
    addAgreementActor() {
      let _that = this;
      let pageAjaxData = _that.pageAjax.data;

      // 提交新增
      addAgreementActor(pageAjaxData)
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.$message.success({
              message: respData.msg || "新增成功",
              onClose: function() {
                _that.goRefresh(-1);
              },
              duration: 1200
            });
          } else {
            _that.pageAjax.btnDisabled = false;
            _that.$message.error(respData.msg || "添加失败");
          }
        })
        .finally(() => {
          _that.pageAjax.loading = false;
        });
    },
    getUserData() {
      let _that = this;
      let userType = _that.alone.userType;
      let searchStr = _that.alone.searchStr;

      // if (_that.agentSearchCp.config.loading || _that.seestarSearchCp.config.loading) {
      //   return;
      // }

      if (userType == "RECRUIT") {
        _that.seestarSearchCp.config.loading = true;
      } else {
        _that.agentSearchCp.config.loading = true;
      }
      getUserData({ params: { role: userType, searchStr: searchStr } })
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            if (userType == "RECRUIT") {
              _that.seestarSearchCp.data = respData.data.list;
            } else {
              _that.agentSearchCp.data = respData.data.list;
            }
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {
          _that.seestarSearchCp.config.loading = _that.agentSearchCp.config.loading = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  .block {
    display: block;
  }
  .c-head {
    margin-top: 20px;
    border-top: 1px solid #f5f7fa;
    line-height: 40px;
    button {
      margin-top: 6px;
    }
  }
  .c-heading {
    height: 40px;
    margin-right: 20px;
    line-height: 40px;
    font-size: 20px;
    color: #ccc;
  }
  .c-subheadingExtra {
    line-height: 40px;
    i {
      margin: 0 20px;
      font-size: 20px;
      color: #ff0000;
    }
  }
  .c-subheading {
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    color: #000;
  }
  .c-title {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #000;
  }
  .c-subtitle {
    line-height: 30px;
  }
  .c-chunk {
    border-bottom: 1px solid #f3f3f3;
  }
  .c-btnCreate {
    margin-top: 8px;
    margin-left: 10px;
  }

  .mi-upload {
    padding: 20px;
    .mi-title {
      margin-bottom: 20px;
    }
    .m-files {
    }
    .m-file {
      position: relative;
      float: left;
      width: 150px;
      height: 150px;
      margin-right: 10px;
      margin-bottom: 10px;
      border: 1px solid #ebeef5;
      box-sizing: border-box;
      img,
      video {
        display: block;
        width: 100%;
        height: 100%;
      }
      &:hover .m-operation {
        opacity: 1;
      }
    }
    .m-operation {
      opacity: 0;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      color: #fff;
      transition: opacity 0.4s;
      i {
        font-size: 20px;
        padding: 10px 20px;
      }
    }
  }
}
</style>
<style lang="scss">
.page {
  .c-piece-iNote {
    .el-form-item__content {
      width: 100%;
    }
  }
}
</style>
